<template>
  <div>
      <a-row style="margin-top: 1.5em;" type="flex" justify="center">
        <a-col>
            <router-link to="/">
              <img src="~/assets/logo.png" class="image-logo" alt="">
            </router-link>
        </a-col>
        <a-col>
          <p class="province-font">山西省</p>
        </a-col>
        <a-col>
          <a-button size="small" class="button-a" @click="locationTo('/ChangeStation.html')">
            切换分站
          </a-button>
        </a-col>

        <a-col :offset="2">
          <div style="float: right">
          <a-input-search style="width: 300px;padding-top: 0.5em"/>
          </div>
        </a-col>
        <a-col>
          <div style="float: right;padding-top: 0.3em;margin-left: 1em">
            <a-button class="login-register" type="link" @click="locationTo('/login/index.html')">
              {{'登录'}}
            </a-button>
            <a-divider type="vertical" style="background-color: #222222;height: 1.5em" />
            <a-button class="login-register" type="link" @click="locationTo('/login/regist.html')">
              {{'注册'}}
            </a-button>
          </div>
        </a-col>
      </a-row>
      <a-row style="background-color:#059655;height: 5em;">
        <div style="text-align:center;padding-top: 1.3em;vertical-align: center">
          <span v-for="(nav,index) in navArr" :key="index">
            <a
                v-if="index !== 2 && index !== 4 && index !== 5"
                @click="locationTo(nav.to)"
                :class="nav.class">
              {{nav.val}}
            </a>

            <a
                v-else
                @click="paddingTop(nav.top)"
                :class="nav.class">
              {{nav.val}}
            </a>

             <a-divider v-if="index !== 5"
                        type="vertical"
                        style="background-color: #222222;
                        height: 2em" />
          </span>
        </div>
      </a-row>
    <a-row>
      <a-carousel autoplay :dots="false">
        <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px;z-index: 1"
        >
          <a-icon type="left-circle"  :style="{ height: '50px'}"  />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" />
        </div>
          <img src="~/assets/slider/home-banner.png" alt=""  style="height:100%;width: 100%;" />
          <img src="~/assets/slider/home-banner.png" alt=""  style="height:100%;width: 100%;" />
          <img src="~/assets/slider/home-banner.png" alt=""  style="height:100%;width: 100%;" />
      </a-carousel>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      navArr: [
        {to: '/index.html',class:'a-color',val:'首页'},
        {to: '/12316.html',class:'a-color',val:'12316'},
        {to: 'http://www.yns0359.com',class:'a-color',val:'电子商务', top: 1900},
        {to: '/publicService.html',class:'a-color',val:'公益便民服务'},
        {to: 'http://www.yns0359.com',class:'a-color',val:'益农社大数据',top:1100},
        {to: 'http://www.yns0359.com',class:'a-color',val:'培训体验',top: 10000},
      ]
    }
  },
  mounted() {
  },
  methods: {
    paddingTop(top) {
      window.scrollTo({top:top,behavior: "smooth"})
    },
    locationTo(url) {
      // window.location =  localStorage.getItem('contextPrefix') + url
    }
  }
};
</script>

<style lang="scss" scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.3;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.image-logo {
  max-height: 3.9em;
  max-width: 35em;
  padding-right: 3em;
}

.province-font {
  font-size: 2em;
  font-weight: 520;
}

.button-a {
  margin-top: 0;
  font-size: 0.2em;
  font-weight: 600;
  color: #C9B8DA;
}

.button-a:hover {
  color: green;
}

.a-color {
  color: #fff;
  padding-left: 2em;
  padding-right: 2em;
  font-size: 1.5em;
  &:hover{
    color: #000c17;
  }
}

.login-register{
  color: black;
  font-weight: 530;
  font-size: 1.5em;
}
.login-register:hover{
  color: green;
}


</style>
